<template>
	<view class="contant">
		<!-- <image style="width: 129px; position: absolute; top: 2%; right: 12%" src="/static/img/23.png" mode="widthFix">
		</image> -->
		<view class="">
			<image style="width: 129px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
		</view>
		<view class="tit">欢迎来到轻创宝典!</view>
		<u--input fontSize='16' v-model="phone" type='number' placeholder="手机号" border="bottom" clearable></u--input>
		<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
		<!-- #ifndef APP-NVUE -->
		<u-input border="bottom" type="number" placeholder="验证码" v-model="code">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<u--input placeholder="验证码" type="number" v-model="code">
				<!-- #endif -->
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
				</template>
				<!-- #ifndef APP-NVUE -->
		</u-input>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		</u--input>
		<!-- #endif -->
		<u--input fontSize='16' v-model="password" type='password' placeholder="密码" border="bottom" clearable>
		</u--input>
		<u--input fontSize='16' @blur="blur" v-model="passwords" type='password' placeholder="再输入密码" border="bottom"
			clearable>
		</u--input>
		<!-- <view class="flex" style="margin-top: 10px;">
			<view style="font-size: 12px;color: #8E9090;">还没有账号？</view>
			<view @click="register" style="font-size: 12px;color: #FF3331;">立即注册</view>
		</view> -->
		<view @click="submit" class="flex"
			style="margin-top: 30px;justify-content: center;background-color: #2447FF;border-radius: 20px;height: 40px;font-size: 16px;color: #fff;">
			重置密码
		</view>
		<view class="flex" style="justify-content: space-between;margin-top: 15px;font-size: 14px;">
			<view @click="down" style="color: #2447FF;">下载app</view>
			<view @click="login" style="color: #858787;">登录账号</view>
		</view>
		<!-- <view class="flex" style="position: fixed;bottom: 30px;">
			<u-checkbox-group shape='circle'>
				<u-checkbox activeColor="red" v-model="checked"></u-checkbox>
			</u-checkbox-group>
			<view style="font-size: 14px;margin-left: 10px;">
				我已阅读并同意<text @click="nav(1)" style="color: #FF3331;">《用户协议》</text>＆ <text style="color: #FF3331;"
					@click="nav(2)">《隐私协议》</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import config from '../../common/config/index.js'
	export default {
		data() {
			return {
				checked: false,
				phone: '', //手机号
				password: '', //密码
				passwords: '',
				code: '',
				tips: '',
				com_info: '',
				imgurl: config.imgurl
			}
		},
		onLoad() {
			this.common()
		},
		methods: {
			down() {
				// #ifdef H5
				window.location.href = this.com_info.applink
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.com_info.applink)
				// #endif
			},
			async common() {
				let res = await this.$http.index.index()
				if (res.code == 1) {
					this.com_info = res.data
				}
			},
			async submit() {
				if (this.phone == '') {
					this.$tips('请填写手机号')
					return
				}
				if (this.code == '') {
					this.$tips('请填写验证码')
					return
				}
				if (this.password != this.passwords) {
					this.$tips('两次密码输入不一致！')
					return
				}
				let res = await this.$http.index.forgetPwd({
					mobile: this.phone,
					mobilecode: this.code,
					password: this.password
				})
				if (res.code == 1) {
					this.$tips(res.msg)
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/login/login?phone=' + this.phone
						})
					},800)
					
				} else {
					this.$tips(res.msg)
				}
			},
			nav(i) {
				switch (i) {
					case 1:
						uni.navigateTo({
							url: '/pages/me/agreement'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/me/privacy'
						})
						break;
				}
			},
			login() {
				uni.navigateTo({
					url: 'login'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.phone == '') {
					this.$tips('请先输入手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$http.index.getcode({
						phone: this.phone,
						type: 'forget',
					})
					if (res.code == 1) {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					} else {
						uni.$u.toast(res.msg);
					}

					// // 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.input-placeholder {
		font-size: 16px !important;
	}

	/deep/ .u-button--success {
		background-color: transparent !important;
		border: none !important;
		color: #2447FF !important;
		font-size: 16px !important;
	}

	/deep/ .u-button__text {
		font-size: 16px !important;
	}

	.contant {
		background-image: url('@/static/font/57.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		padding: 104px 30px 0px;

		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 15px;
			background-color: #f00;
		}

		.tit {
			font-size: 20px;
			font-weight: bold;
			color: #1D1F20;
			margin-top: 15px;
		}

		.u-input {
			padding: 30px 0px 15px !important;

		}

		.input-placeholder {
			font-size: 16px !important;
		}
	}
</style>
